import {setBadge} from '../utils/websocket.js';
import {videoToFull} from '../utils/chatUtil.js'; 
import {getServiceslist,sendMsg,getOneHistory,readMessage} from '../utils/chat.js';
import {deepClone,formatTime} from '../utils/util.js';
import {commentImgUrl} from '../../api/api';

// import { timingSafeEqual } from 'crypto';
Page({
  
  data: {
    showSendMenu:false,
    InputBottom: 0,
    paddingSize:100,
    services:[],//所有的客服
    selService:{},//选中的客服
    inputTxt:"",//输入框输入的内容
    histories:[],//保存历史记录
    itemMsg:{},//上一个页面传递过来的数据,渲染头像的时候使用的是这个这个里面的头像的地址
    myMsg:{},
    toIndex:"",//瞄点，滚动到最后一条消息
    scrollTop:0,
    merchantId:"",//页面传值传递过来的商家id
    // 每次改变toindex 的值是不是就可以
    pageNum:0,
    showRefresh:false
  },
  onLoad(){


  },

// ==================需要放到外部文件的方法
  
  toOrderDetail(e){
      console.log(e)
      let msg = e.currentTarget.dataset.msg;
      wx.navigateTo({
        url:'/pages/orderDetail/orderDetail?flag=chat&id='+msg.orderId,
      })
  },




  // 播放回调函数
  toPlayFunction(e){
    let id = e.currentTarget.id;
    //根据id获取到当前视频对象
    let video = wx.createVideoContext(id);
    video.requestFullScreen({duration:0})
    console.log("播放回调函数")
  },

  // 退出全屏回调函数
  videoExitFull(e){
    console.log(e)

    //变成全屏
    if(e.detail.fullScreen)return;
    
    let id = e.currentTarget.id;
    //根据id获取到当前视频对象
    let video = wx.createVideoContext(id);
    video.pause();
  },

  




// 点击发送视频
  selSendType(){
     this.setData({
        showSendMenu:true
     })
     
  },

  closeSendMenu(){
      if(this.data.showSendMenu == true){
        this.setData({
          showSendMenu:false
       })
      }
  },


// ==================需要放到外部文件的方法





//保存聊天记录
//获取在线客服
//渲染历史记录

sendPic(){
  let that = this;
  console.log("sendPic-------");
  wx.chooseImage({
    count:3,
    sizeType: ['original', 'compressed'],
    sourceType: ['album'],
    success (res) { 
      // tempFilePath可以作为img标签的src属性显示图片
      const tempFilePaths = res.tempFilePaths;
      console.log(`%c6666`,"color:orange");
      console.log(tempFilePaths);
      tempFilePaths.forEach(item =>{
              //一次选择的图片路径是一个数组，
              wx.uploadFile({
                url:commentImgUrl,
                filePath:item,
                name:'file',
                formData:{
                  'user':'test'
                },
                success (res){
                  console.log(res,"图片上传成功");
                  let result = JSON.parse(res.data);
                  if(result.code == 200){
                      // let returnImgs = that.data.returnImgs;
                      // returnImgs.push(result.data);
                      // //把返回的结果存储到一个数组中
                      // that.setData({
                      //     returnImgs
                      // })
                      console.log(result.data,"返回的图片的路径.....");
                      that.toSend("img",result.data);

                  }else{
                     //给页面添加一个破裂的图片的照片标志。 
                      wx.showToast({
                        title: '服务器错误,图片上传错误',
                        icon:"none"
                      })
                  }
                },
                fail(){
                     wx.showToast({
                       title: '服务器错误，图片发送失败',
                     })
                }
              })
           
      })
    }
  })

},

// //发送视频
// sendVideoW(){
//    sendVideo(function(result){
//         //回调
//         console.log(result,"上传视频成功回调函数==============")
//         let video = result.data;

//    });
// },

//全屏预览图片
seeBigImg(e){
  let urls = [];
  urls.push(e.currentTarget.dataset.src)
  wx.previewImage({
    current:e.currentTarget.dataset.src, //当前显示图片的http链接
    urls, // 需要预览的图片http链接列表
  })
},







  onShow(){
    // 获取到本地的用户信息保存在内存中 
    let userInfo = wx.getStorageSync('Yuserinfo').userInfo;
    this.setData({
        myMsg:userInfo,
    })



    
    //获取页面传值
    let pages = getCurrentPages();
    let currentPage = pages[pages.length-1];
    let id = currentPage.options.merchantId;
    let time = currentPage.options.time;
    //如果是页面传值过来的time和内存中的time一样，那么说明是从
    // 选择相册的也买跳转过来的，那么不需要刷新页面
    // 如果是从其他入口跳转到当前的页面，那么会出生地一个时间戳，
    // 时间戳和data 中的time 不一样，需要刷新。
    if(time == this.data.time)return;
    console.log(id,time,"----------------页面传值")
    this.setData({
        merchantId:id,
        time,
    })

    //设置标题栏
    this.readMessageW(id);
    // 如果上次从这个页面出来，然后还是和同一个
    getOneHistory(id).then(res=>{
         console.log(res,"获取到一条聊天记录");
         if(res.data.code == 200){
              // item 用来放到内存中， 
              let item = res.data.data;
              //深拷贝  
              let item1 = deepClone(item);
              //if(item.contents){
              //   item.contents = {}; 
              //}
              //删除数组中的contents 聊天记录，节省手机内存。  
              this.setData({
                 itemMsg:item
              })
              
              this.init(id,item1);
         }else{
             wx.showToast({
                title:"系统错误！",
             })
         }
    })

  },

  //清空未读消息
  readMessageW(merchantId){
    console.log(merchantId,"%c 清空未读消息----------------","color:orange;");
    readMessage(merchantId,"merchant").then(res=>{
         console.log(res,"清空未读消息");
    })

    //setBadge();
  },

  onUnload(){
    //刷新tabbar和
    console.log("onhide方法------------------------")
    setBadge();
    // this.readMessageW();
  },

  
  //接收到消息之后会跨页面调用这个方法
  receivedMsg(msg){
       console.log(msg,"接收到的消息");
       if(msg.merchantId == this.data.merchantId){
            let histories = this.data.histories;
            histories.push(msg);
            this.setData({
                histories,
            })
            this.setToIndex();
            //进来的时候和每次接收到消息的时候标志已读。
            // 只有在退出的时候修改tabbar
            this.readMessageW(this.data.merchantId);
       }else{
          let content = JSON.parse(msg.content);
          console.log(content,"content");
          if(content.type == "text"){
              wx.showToast({
                title:`${msg.mname}：【消息】`,   
                image:"../../images1/timg.png",
                duration:3000
              })

          }else{
              //图片
              wx.showToast({
                title:`${msg.mname}：【图片】`,  
                image:"../../images1/timg.png",
                duration:3000
              })

          }

          
       }
  },
  
  //返回商家id
  //getMerchant(){
  //   return this.data.merchantId
  //}

  //每次进入之后要初始化数据，因为这个页面四公用的。
  init(id,itemMsg){
      console.error(itemMsg,"删除后的 数组")
        //---------- 清空数据
        // if(id!=this.data.merchantId){
          this.setData({
            services:[],
            selService:{},
            inputTxt:"",//输入框输入的内容
          });
          //------------重新获取客服列表
          getServiceslist(id).then(res=>{
            console.log(res,"获取到客服列表");
            let data = res.data.data;
            //1-------判断客服列表有几个客服
            //如果没有获取到，说明当前店铺没有客服，不要继续执行下去
            // 发送消息的时候也会有拦截。
            if(!data||data.length<1){
                wx.showToast({
                  title: '没有在线客服哦！',
                  icon:"none"
                })
                return;
            }


            //2--------把客服列表封装成一条消息
            let serviceMsg = {
              initiator: "m",
              msg:"您可以选择的客服：",
              services:data,
              content:""
            };

            //3 ------客服列表放入内存
            this.setData({
                services:data
            })



          //4 -------设置聊天窗口的名字。
          let titleBar = "全求新商城";
          console.log(itemMsg,"ItemMsg-------------------")
          if(itemMsg){
            titleBar = itemMsg.mname||"全求新商城";
          }else{
            titleBar = data[0].storeName||"全求新商城";
          }

          
          //设置页面标题
          wx.setNavigationBarTitle({
            title:titleBar
          })

          console.log("添加消息列表",this.data.histories);
          //获取发送之前消息的客服的id
          
          let serId;

          if(itemMsg){
             serId = itemMsg.initiatorId||"";
          }
          // id 存在那么使用这个id 匹配，id 不存在那么使用
          // 第一个。
          if(serId){
            //根据serid 选择客服
            let serList = this.data.services;
            let service = "";
            serList.forEach(item,idx=>{
                if(item.id == serId){
                    service = item;
                    // 给对象添加一个index 用来区分
                    // 是不是主账号，发送信息的时候要区分主账号和子账号。
                    service.index = idx;
                }
            })
            //如果匹配到了那么就使用这个
            if(service){
                this.setData({
                  selService:service
                })
            }else{
              // 如果没有匹配到的话就默认使用第一个
                let ser = data[0];
                ser.index = 0;
                this.setData({
                  selService:ser
                })
            }
          }else{
              let ser = data[0];
              ser.index = 0;
              this.setData({
                selService:ser
              })
          }



          // 根据selserve 渲染一条提示消息
           //把切换客服提示封装成一个消息
          //主账号和子账号的名字字段不一样
          let tipService = this.data.selService;
          let name = tipService.storeName||tipService.nickName;
          //添加一个提示信息
          let tipMsg = {
              content:{ 
                  type:"tip",
                  msg:"客服："+name+"很高兴为您服务！"
              },
              initiator: "m"
          }





 
          
            let histories =this.data.histories;
            histories.push(serviceMsg);
            histories.push(tipMsg);
            this.setData({
              histories,
            })
          })
      // }

      //-----------渲染历史记录
      this.renderHistory(itemMsg);

   
  },


  renderHistory(history){
      //获取到传递过来的历史记录数据。
      // let history = this.data.itemMsg;
      console.log(history,"历史记录");
      //如果没有历史记录，那么不去做下面的操作
      if(history == null||history==""){
           return;
      }


      //拼接出来第一条数据
      let item1 = {
         chatTime:history.chatTime,
         content:history.content,
         initiator:history.initiator,
         mname:history.mname
      }
      //concat后面的所有数据
      let histories = [];
      histories.push(item1);
      // 判断contents 是不是存在，如果不存在那么不需要拼接
      // 为什么会不存在呢？
      // 因为如果只有一条消息的时候就不存在。后端是这样设置的
      if(history.contents){
          histories = histories.concat(history.contents);
          //处理数据的结构，然后直接渲染了。
      }
      //1 现在已经把历史记录的格式处理好了，可以直接渲染了。
      //2 把历史记录保存到本地，
      //3 调用分页函数，触底一个参数（currentPage）
      //4 根据currentPage 取出历史记录 
      wx.setStorageSync('historyList',histories);
      this.renderHistoryForPage();
  },

  renderHistoryForPage(){
      let that =this;
      console.warn("加载更多历史记录.....")


      let page = that.data.pageNum;//从0开始
      let historyList = wx.getStorageSync('historyList');
      // slice(2,8); 不会截取索引为8 的数据，所以可以直接使用 length 不需要 -1
      let lastIdx = historyList.length;
      //lastidx = idx - page*10;
      //preidx = idx - (page+1)*10+1
      //50 - 0*10 = 50
      //50 - 1*10 = 41

      //50 - 2*10 = 31
      //后一个index


      
      let idx2 = lastIdx - page*10;
      let idx1 = lastIdx - (page+1)*10;
      // 计算出来的数据是 10- 20 ，20-30 ，30-40 
      // 使用slice 截取的时候不会截取最后一个索引的值20， 30 ，40
      // 所以实际每次截取的索引是 10-19 20-29 30-39

      // 判断两个索引,上一次
      if(idx2 <= 0){
          wx.showToast({
            title: '没有更多啦',
            icon:"none"
          })
          return;
      }
      console.log("%c通过","color:orange;")
      if(idx1 <0){
          idx1 = 0;
      }

      // 取出来的数组应该放在原来的数组的前面，
      // 也就是说原来的数组在现在的数组的后面
      // 也就是说使用 现在的数组 concat 原来的数组
      // slice 方法不会截取最后一个索引的数据
      // slice(2,8); 不会截取索引为8 的数据，所以可以直接使用 length 不需要 -1
      let history = historyList.slice(idx1,idx2);
      console.error(history,"截取的数组")
      console.error(idx1,idx2,"截取的索引")
      let histories = this.data.histories;
      let newHistory = history.concat(histories);
      


      this.setData({
         histories:newHistory,
         pageNum:this.data.pageNum+1,
      })

      // 如果是第一次调用那么渲染完成后要滚动到最底部
      // 如果是用户手动点击加载更多那么不需要
      if(page == 0){
        this.setToIndex()
      }


      

  },

  


  //选择客服的方法
  selService(e){
      //console.log(e.currentTarget.dataset.itemdata);
      console.log("触发选择客服的方法");
      let item = e.currentTarget.dataset.itemdata;
      let index = e.currentTarget.dataset.idx;
      item.serviceIdx = index;




      // let histories = this.data.histories;
      // let history = histories[histories.length-1]
      


      this.setData({
        selService:item
      })


      // 给界面添加一条消息
      // wx.showToast({
      //    title:'客服切换成功！',
      // })
      
      // 主账号和子账号的名字字段不一样
      let name = item.storeName||item.nickName;
      // let name = data[0].storeName||data[0].nickName;
      // 添加一个提示信息
      let tipMsg = {
          content:{
              type:"tip",
              msg:"客服："+name+"很高兴为您服务！"
          },
          initiator: "m"
      }
      let histories =this.data.histories;
      histories.push(tipMsg);
      this.setData({
        histories,
      })

      //设置滚动到底部
      this.setToIndex()
  },


  addTxt(msg){
    
    let  date=new Date();
    date=formatTime(date);
      //这样就和后端传递过来的事件一样长了。
     
      let item = {
         chatTime:date,
         initiator:"u",
      }

      console.log("---------聊天数据----------------",item);

      let content = {
        type:"text",
        msg:msg
       }

       item.content = JSON.stringify(content);

      let histories =  this.data.histories;
      histories.push(item);
      this.setData({
        histories,
      })

      //设置滚动到底部
      this.setToIndex()


      // ------------------------------------------------------------------


  },
  
  addImg(img){
    
    let  date=new Date();
    date =formatTime(date);
    //这样就和后端传递过来的事件一样长了。

    let item = {
       chatTime:date,
       initiator:"u",
    }

    let content = {
      type:"img",
      msg:img
    }

    item.content = JSON.stringify(content);

    let histories =  this.data.histories;
    histories.push(item);
    this.setData({
      histories,
    })

    //设置滚动到底部
    this.setToIndex()


    // ------------------------------------------------------------------





  },

  //点击按钮调用这个方法
  toSend1(){
      this.toSend("text");
  },


  toSend(flag,imgPath){
        let that = this;
        console.log("发送消息----");
        //获取大输入的信息
        console.log(this.data.inputTxt,"输入框的信息")
        //获取输入框中的信息
        let text = this.data.inputTxt;
        //清空输入框 

        setTimeout(()=>{
            console.log("定时器-------------");
            this.setData({
              inputTxt:""
            })
            

        },100)

       
        if(that.data.selService.id){
            
        }else{
            wx.showToast({
              title:'没有客服哦!',
              icon:"none"
            })
            return;
        }
        // 获取选中的客服
        let item = this.data.selService;
        // 获取本地存储的用户信息
        let userInfo = wx.getStorageSync('Yuserinfo').userInfo;
        console.log(userInfo,"本地的用户信息");



       

        //调用接口发送信息。
        /**
        openId
        uName 用户昵称 //发送者昵称
        headImage 用户头像
        recipientId 接收者id
        merchantId 商家id
        message  消息内容 
        type 如果选择的客服是主账号值为merchant, 如果是子账号值为subAccount
       * 
       * **/  




      let data = {
        recipientId:item.id,//客服id
        uName:userInfo.nickName,//我的用户名
        headImage:userInfo.avatarUrl,//我的头像
        merchantId:this.data.merchantId//商家id
      }
      let message = "";
      if(flag == "text"){
          console.log(text,"输入框中的信息");
          //判断输入的内容是不是空
          if(text.trim() == ""){
              console.error("输入的内容是空");
              return;
          }
          message = {
            type:"text",
            msg:text
          }
          this.addTxt(text);
      }else{ 
         //发送图片 
          message = {
            type:"img",
            msg:imgPath
          }
          this.addImg(imgPath)
          
      }

  
    
  
      message = JSON.stringify(message);
      data.message = message;
      
      //根据数组索引判断是不是主账号。
      if(item.index == 0){
         data.type = "merchant"
      }else{
         data.type = "subAccount"
      }
  
      console.log(data);
       
      sendMsg(data).then(res=>{
          console.log(res,"发送消息的回调函数");
          // 发送成功之后去渲染历史记录
      })
  },

  // //添加一条历史记录
  // addHistory(data){
  //      let data = new Data();
  //      //添加一条历
  //      console.log(data,"获取到时见")
      
  // },










/**
 * 1 键盘弹出的时候输入框会上移，上移的高度就是键盘距离底部的高度
 * 
 * 2 要保证消息外层的包裹框架距离底部的高度大于等于键盘的高度，
 *   
 * 1 判断 msgW 距离底部的距离
 * 2 if 大于键盘的高度，那么什么都不做
 * 3 如果小于键盘的高度，那么需要上移
 * 4 上移多少呢？
 * 键盘的高度 - msgw 底部距离屏幕底部的高度 
 *    
 * 
 * 
 * **/ 






  // ui 自带的方法
  InputFocus(e) {
    this.setData({
      // e.detail.height 可以获取键盘弹出的高度
      // InputBottom: e.detail.height,
      // paddingSize:true
    })

    // setTimeout(() => {
    //     this.setToIndex();
    // },200);



    //设置scroll 的padding-bottom 的高度是b + 100rpx(输入框的高度)

  },
  InputBlur(e) {
    // this.setData({
    //   InputBottom: 0,
    //   // paddingSize:false,
    // })
  },



  inputMsg(e){
        console.log(e.detail.value,"输入内容");
        this.setData({
            inputTxt:e.detail.value
        })
  },
  // 让scroll 滚动到底部
  // 1 每次push进去一个历史记录的时候
  // 2 每次弹出键盘的时候
  // 3 每次进入页面的时候


   setToIndex(){
      // 获取到histories 最后一个索引

      //  let index = this.data.histories.length-1;
      //  console.log("最后一个的索引",index);
      //  this.setData({
      //      toIndex:"id"+index
      //  })
      let that = this;

      wx.createSelectorQuery().select('.cu-chat').boundingClientRect(function(rect){
        // 使页面滚动到底部
        wx.pageScrollTo({
          scrollTop: rect.height
        })
        // console.log(rect,"-------rect")
        // that.setData({
        //     scrollTop:rect.height
        // })

        
      }).exec()

   },


})
